Pagination UI তৈরি এবং ব্যবহার

Django তে pagination ব্যবহার করে আপনি অনেক ডেটার মধ্যে থেকে একটি নির্দিষ্ট সংখ্যক আইটেম একবারে প্রদর্শন করতে পারেন, যেমন ব্লগ পোস্ট, প্রোডাক্ট তালিকা বা কোনো বড় ডেটাবেস থেকে আংশিক ডেটা দেখানো। Pagination এর মাধ্যমে আপনার অ্যাপ্লিকেশন আরও ব্যবহারে সুবিধাজনক এবং দ্রুত হয়ে ওঠে।

এখানে, আমরা Django Pagination UI তৈরি এবং ব্যবহারের নিয়ম নিয়ে আলোচনা করব।

Pagination কী?

Pagination হল একটি পদ্ধতি যার মাধ্যমে বড় বড় ডেটা সেটগুলোকে ছোট ছোট পৃষ্ঠায় ভাগ করা হয়, যাতে ব্যবহারকারীরা সহজে নেভিগেট করতে পারে। উদাহরণস্বরূপ, একটি ব্লগের ১০০টি পোস্টের মধ্যে ১০টি পোস্ট প্রতি পৃষ্ঠায় দেখানো হয়, এবং ব্যবহারকারী পরবর্তী পৃষ্ঠায় যেতে পারে।

Pagination UI তৈরি করার ধাপ

১. View-এ Pagination যুক্ত করা

প্রথমে, Django তে Pagination কাজ করার জন্য আপনাকে Paginator এবং Page ক্লাস ব্যবহার করতে হবে। Paginator ক্লাস ডেটা সেটকে বিভক্ত করে এবং Page ক্লাস ব্যবহারকারীর কাছে পৃষ্ঠার তথ্য প্রদান করে।

ধরা যাক, আপনার কাছে একটি ব্লগ পোস্টের মডেল রয়েছে এবং আপনি তা pagination সহ প্রদর্শন করতে চান।

models.py:

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

views.py:

from django.core.paginator import Paginator
from django.shortcuts import render
from .models import Post

def post_list(request):
    posts = Post.objects.all()  # সব ব্লগ পোস্ট নিয়ে আসা
    paginator = Paginator(posts, 5)  # প্রতি পৃষ্ঠায় 5টি পোস্ট
    page_number = request.GET.get('page')  # URL থেকে পৃষ্ঠা নম্বর পাওয়া
    page_obj = paginator.get_page(page_number)  # পৃষ্ঠার ডেটা

    return render(request, 'post_list.html', {'page_obj': page_obj})

এখানে, Paginator ক্লাসে প্রথম আর্গুমেন্ট হিসেবে ডেটা (posts) এবং দ্বিতীয় আর্গুমেন্ট হিসেবে প্রতি পৃষ্ঠায় প্রদর্শিত আইটেমের সংখ্যা (৫) উল্লেখ করা হয়েছে। এরপর, get_page() মেথডটি ব্যবহার করে ইউজার যেটি পৃষ্ঠা দেখতে চাচ্ছে, সেই পৃষ্ঠা ডেটা নেওয়া হয়েছে।

২. Template-এ Pagination UI তৈরি করা

এরপর, আপনাকে HTML টেমপ্লেট ফাইলে পৃষ্ঠা নেভিগেশনের UI তৈরি করতে হবে।

post_list.html:

{% for post in page_obj %}
    <div class="post">
        <h2>{{ post.title }}</h2>
        <p>{{ post.content }}</p>
    </div>
{% endfor %}

<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">« first</a>
            <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">last »</a>
        {% endif %}
    </span>
</div>

এখানে, আমরা page_obj এর মাধ্যমে বর্তমান পৃষ্ঠা নম্বর এবং মোট পৃষ্ঠার সংখ্যা দেখাচ্ছি। ব্যবহারকারীর জন্য প্রথম পৃষ্ঠা, আগের পৃষ্ঠা, পরবর্তী পৃষ্ঠা, এবং শেষ পৃষ্ঠা লিঙ্কগুলি তৈরি করেছি।

• page_obj.has_previous: যদি আগের পৃষ্ঠা থাকে, তাহলে প্রথম এবং পূর্ববর্তী পৃষ্ঠায় যাওয়ার লিঙ্ক দেখাবে।
• page_obj.has_next: যদি পরবর্তী পৃষ্ঠা থাকে, তাহলে পরবর্তী এবং শেষ পৃষ্ঠায় যাওয়ার লিঙ্ক দেখাবে।
• page_obj.number: বর্তমান পৃষ্ঠার নম্বর।
• page_obj.paginator.num_pages: মোট পৃষ্ঠার সংখ্যা।

৩. Pagination UI স্টাইলিং

Pagination UI-কে আরও সুন্দরভাবে দেখানোর জন্য আপনি CSS ব্যবহার করতে পারেন। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো:

styles.css:

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.step-links a, .step-links span {
    margin: 0 10px;
    text-decoration: none;
}

.step-links .current {
    font-weight: bold;
}

এই CSS কোডটি পেজ নেভিগেশনের লিঙ্কগুলোকে কেন্দ্রভূত (centered) করে, এবং পৃষ্ঠা নম্বরের জন্য কিছু স্টাইলিং প্রদান করে।

Pagination এর সুবিধাসমূহ

1. পারফরম্যান্স উন্নতি: বড় ডেটা সেটের জন্য pagination ব্যবহারের ফলে শুধুমাত্র প্রয়োজনীয় ডেটা লোড হয়, যা সার্ভারের উপর কম চাপ ফেলে এবং লোড টাইম কমায়।
2. ব্যবহারকারী অভিজ্ঞতা: pagination ব্যবহারকারীদের জন্য ডেটা নেভিগেট করা সহজ এবং দ্রুত করে, বিশেষ করে যখন বড় বড় ডেটা তালিকা থাকে।
3. ফ্লেক্সিবিলিটি: আপনি বিভিন্ন পরিমাণে ডেটা প্রতি পৃষ্ঠায় প্রদর্শন করতে পারেন, যা বিভিন্ন প্রয়োজনে উপযোগী।

Pagination এর উন্নত বৈশিষ্ট্য

1. ডায়নামিক পৃষ্ঠা সংখ্যা: আপনি আরও উন্নত ফিচার যোগ করতে পারেন, যেমন পৃষ্ঠা সংখ্যার পরিবর্তন বা ফিল্টার যোগ করা।
2. AJAX Pagination: আপনি AJAX ব্যবহার করে পেজ নেভিগেশন আরো স্মুথ এবং দ্রুত করতে পারেন, যাতে পৃষ্ঠা রিফ্রেশ ছাড়াই নতুন ডেটা লোড হয়।

এইভাবে, Django তে pagination UI তৈরি এবং ব্যবহার করা যায়, যা বড় ডেটা সেটের জন্য ব্যবহারকারীকে আরো সহজে এবং দ্রুত ডেটা অ্যাক্সেস করার সুযোগ দেয়।